<%@ page import="com.XiGuaXiaoMe.dao.courseDao" %>
<%@ page import="com.XiGuaXiaoMe.entity.course" %>
<%@ page import="java.util.List" %>
<%@ page language="java" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <link rel="stylesheet" type="text/css" href="<%= request.getContextPath()%>http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/CSS/css/jquery.paginate.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/CSS/css/jquery.yhhDataTable.css" />
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/JS/js/jquery.paginate.js" ></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/JS/js/jquery.yhhDataTable.js" ></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/JS/js/index.js" ></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/CSS/toPage.css">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/font_cqbiizu5og9/iconfont.css">
    <title>课程管理</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/CSS/导航栏c.css" />

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/CSS/table.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/CSS/mainpage.css" />

    <link href="<%= request.getContextPath()%>https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">


    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/CSS/ style_1.css" />


    <style>

        .btn-box {
            width: 800px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        .bo {
            position: relative;
            width: 250px;
            height: 125px;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
            user-select: none;
            margin: 5px;
            box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
        }

        .bo {
            /*background: linear-gradient(
                    150deg,
                    rgb(251, 122, 8),
                    rgb(240, 47, 31)
            );*/
            background: #cb997e;
        }


        .ripple {
            display: block;
            position: absolute;
            border-radius: 100%;
            background: rgba(255, 255, 255, 0.5);
            transform: scale(0);
        }


        .animation {
            animation: ripple 0.5s ease-in;
        }

        @keyframes ripple {
            100% {
                transform: scale(3);
                opacity: 0;
            }
        }


    </style>


</head>
<body>
<iframe class="obj1" src="${pageContext.request.contextPath}/Student/head.html" frameborder="0" width="1300px" height="90px" scrolling="no"></iframe>

<div class="shell" style=" background-color: #bb3e03;">
    <a href="${pageContext.request.contextPath}/Teacher/userinformation.jsp" class="box" style="color: #faedcd;" ><i class="iconfont icon-liebiao"></i><span>个人信息</span></a>
    <a href="<%= request.getContextPath()%>/Teacher/selectCou.jsp" class="box" style="color: #faedcd;"><i class="iconfont icon-cangku"></i><span>课程管理</span></a>
    <a href="/MyWeb/Teacher/classes.jsp" class="box"style="color: #faedcd;"><i class="iconfont icon-zhuti_tiaosepan"></i><span>学生成绩管理</span></a>
    <a href="#" class="box"style="color: #faedcd;"><i class="iconfont icon-qianbao"></i><span>已选课程</span></a>

    <a href="<%= request.getContextPath()%>/Student/日历3.html" class="box" style="color: #faedcd;"><i class="iconfont icon-dunpaibaoxianrenzheng"></i><span>日历</span></a>
    <a href="#" class="box"style="color: #faedcd;"><i class="iconfont icon-dengchu"></i><span>退出系统</span></a>
</div>

<%
    courseDao select = new courseDao();
    List<course> list = select.findAll(); %>
<div class="btn-box" style="font-size: larger">
    <%for(course c:list){ %>
    <div class="bo">
        <span class="ripple"></span>
        <p><a style="text-decoration: none;color: white"
              onClick="window.location.href=('/MyWeb/Teacher/studentscore.jsp?name=<%= c.getName() %>')"><%=c.getName()%></a></p>
    </div>
    <%}%>

</div>

<script>
    let box = document.querySelectorAll(".bo");
    for (let i = 0; i < box.length; i++) {
        box[i].onmouseenter = function (event) {
            let ripple = box[i].querySelector(".ripple");
            ripple.classList.add("animation");
            ripple.style.width = this.offsetWidth + "px";
            ripple.style.height = this.offsetWidth + "px";
            ripple.style.top = -(this.offsetHeight - event.offsetY) + "px";
            ripple.style.left = -(this.offsetWidth / 2 - event.offsetX) + "px";
            setTimeout(function () {
                ripple.classList.remove("animation");
            }, 500)

        }
    }


</script>
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

<script>
    L2Dwidget.init({"display": { "superSample": 2, "width": 100, "height": 200, "position": "right", "hOffset": 0, "vOffset": 0},
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 1,
            "opacityOnHover": 1
        }

    });
</script>



</body>
</html>